<template>
    <div class="goods-layout" v-loading="fullscreenLoading">
        <div class="info-back">
            <el-row :gutter="20">
                <el-col :span="20">
                    <div class="back-icon">
                        <i class="fa fa-arrow-left back" aria-hidden="true" @click="back()"></i>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="add-position">
            <div v-for="(item, index) in items">
                <el-row :gutter="20">
                    <!-- <input type="checkbox" class="check-box" :id="item.id" :value="item.name" v-model="checkedNames" > -->
                    <div class="grid-content bor-radius-10 mg-bo-10 pos-relative bor-no"
                         @click="handler(index,classItem[index])"
                    >
                        <div class="card-01 bor-no">
                            <el-row :gutter="20" class="card-row mg-bo-10">
                                <el-col :span="1" class="role-name ">

                                </el-col>
                                <el-col :span="23" class="role-name ">
                                    <div class="check-item">
                                        <el-radio v-model="classItem[index]" :label="index">&nbsp;
                                        </el-radio>
                                    </div>
                                    <div class="check-box-con">
                                        {{item.name}}


                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-row>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: 'keepalive-false',
        data: function () {
            return {
                items: [],
                activeName: 'first',
                name: '',
                value: true,
                currentDate: new Date(),
                classItem: [],
                isMultiselect: false,
                fullscreenLoading: true
            }
        },
        created: function () {
            this.$$("#content").scrollTop(0)
            let self = this;
//            http://192.168.1.136:8081/shop/user/?kindCode=10&_search=false&nd=1493295168876&rows=20&page=1&sidx=id&sord=desc&_=1493294998144
//            this.$axioxs.get("/user/?kindCode=10&states=1")
            this.$axioxs.get("/user/prize/userNoPrize")
                .then(function (res) {
                    console.log(JSON.stringify(res.data));

                    self.items = res.data.records;
                    console.log(self.items)
                });
            this.fullscreenLoading = false;
        },
        methods: {
            handler: function (index) {
                let self = this;
                console.log(this.items[index]);
                this.$router.push({
                    name: '',
                    path: '/toEmployeeSet',
                    query: {formMember: self.items[index]}
                });
            },
            onSubmit: function () {
                this.$router.push("/toEmployeeSet");
            },
            back(){
                this.$router.push("/toEmployeeSet");
            }
        }
    }
</script>
<style scoped>
    .percentage-layout input[type=checkbox] {
        display: inline-block;
    }

    .percentage-layout input[type=radio] {
        display: inline-block;
    }

    .content a:not(.button):visited {
        color: #333;
    }

    .percentage-layout .checkbox, .radio {
        line-height: 70px;
    }

    .role-name {
        padding-top: 3px;
    }

    .card-row {
        background-color: #fff;
        padding: 10px 20px;
        border-top: 1px solid #cacaca;
        border-bottom: 1px solid #cacaca;
    }

    .back {
        cursor: pointer;
    }

</style>